<template>
	<div id="city">
		<div id="city-header">
			<p class="iconfont icon-fanhui" @click="test()"></p>
			<span class="title">选择城市</span>
		</div>
		<div id="searchtop">
			<input type="search" name="search" id="search" value="" placeholder="请输入搜索关键词" v-model="search"/>
			<input type="button" name="btn" id="btn" value="取消" />
			<ul id="list">
				<li v-for="(item, index) in list" :key = "index" >
					{{item}}
				</li>
			</ul>
			<strong class="iconfont icon-sousuo"></strong>
		</div>
		<ul id="citylist"></ul>
		<span class="iconfont icon-shang" id="top" @click="tophide()"></span>
	</div>
	
</template>

<script>
	import footerToggle from "@/md/footerToggle.js"
	import headerToggle from "@/md/headerToggle.js"
	import city			from "@/json/city.json"
	import $            from "jquery"
	export default{
		data(){
			return{
				search : "",
				list:[]
			}
		},
		mounted(){
			footerToggle.hide();
			headerToggle.hide();
			$(function(){
				$("#search").focus(function(){
					$("#list").css("display","block");
					$('#btn').css({
						"display":"block",
						float:'right'
					});
					$(this).css("width","60%");
					$('#btn').click(function(){
						var search = $("#search").val('');
						$("#search").css("width","80%");
						$('#btn').css('display',"none");
					})
				})
				$("#search").blur(function(){
					$("#list").css("display","none");
				})
			})
			
			
			//城市遍历
				var cont = "";
			for(var attr in city){
//				that.city = city;
//				console.log(city);
//				console.log(city[attr]);
				cont += "<li data-v-b94909c2 class='province'><h3 data-v-b94909c2>"+city[attr].name;
				var cityList = city[attr].cityList;
				var cityobj = "";
				for(var a in cityList){
//					console.log(cityList[a].name)
					cont += "</h3><span data-v-b94909c2>"+cityList[a].name+"</span>";
				}
				cont+="</li>";
			}
			$("#citylist").append(cont);
		
			//滚动事件
			document.addEventListener('scroll',function(){
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 				if(scrollTop>300){ 
					document.getElementById("top").style.display = "block"; 
				}else{
					document.getElementById("top").style.display = "none";					
					};
			})
		},
		methods:{
			test(){
				window.history.go(-1);
			},
			tophide(){
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
				if(scrollTop>300){
					document.body.scrollTop = 0;
					document.documentElement.scrollTop = 0;
				}
		}
		},
		components:{
			
		},
		watch:{
			search:function(newVal){
				var that = this;
				$.ajax({
					type:"get",
					url:"http://10.8.154.144:3000",
					data:{
						newVal:newVal
					},
					success:function(data){
						console.log(data)
						that.list = data;
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
@import "~@/scss/main.scss";
#city{
	overflow:auto;
		#city-header{
	 	@include rect(100%, 0.53rem);
	 	background-color: #1C2635;
	 	.iconfont{
	 		color:#B5B8BD;
	 		float:left;
	 		font-size: 24px;
	 		margin:12px;
	 	}
	 	.title{
	 		color:#fff;
	 		float:left;
	 		font-size:20px;
	 		margin:14px 110px 0px;
	 	}
	 }
	 #searchtop{
	 	width:100%;
	 	height:50px;
	 	background: #F6F6F6;
	 	position: relative;
	 	#search{
	 		width:80%;
	 		height:40px;
	 		border-radius: 5px;
	 		margin:5px 10px;
	 		text-indent:30px ;
	 	}
	 	#btn{
	 		width:15%;
	 		height:40px;
	 		border-radius: 5px;
	 		margin:5px 10px;
	 		border:1px solid #fff;
	 		background:#F6F6F6;
	 		display:none;
	 	}
	 	.icon-sousuo{
	 		position: absolute;
	 		left:65px;
	 		top:14px;
	 	}
	 	#column{
	 		width:375px;
	 		height:20px;
	 		position:absolute;
	 		left:0;
	 		bottom:-16px;
	 	}
	 	ul{
	 		width:100%;
	 		background:#fff;
	 	}
	 }
	 
	 #citylist{
	 	width:375px;
	 	.province{
	 		margin-top:10px;
	 		h3{
	 			width:100%;
	 			font-size:20px;
	 			height:40px;
	 			background:#EBEBEB;
	 			line-height: 40px;
	 			text-indent: 10px;
	 		}
	 		span{
	 			display:inline-block;
	 			padding:10px;
	 			font-size:14px;
	 		}
	 	}
	 }
}
 
 
 .icon-shang{
		position:fixed;
		display:none;
		right:10px;
		bottom: 10px;
		width:40px;
		height:40px;
		font-size:30px;
		background:rgba(96,96,96,.4);
		border-radius: 20px;
		line-height:40px;
		text-align: center;
		color:#fff;
	}
</style>